<template>
  <div>
    <img
      :src="require(`@/assets/${type}.png`)"
      style="width: 100%; height: auto"
    />
    <div class="article-text">
      <div class="breadcrumb">
        <el-breadcrumb>
          <el-breadcrumb separator=">">
            <el-breadcrumb-item :to="{ path: getLastPage()[0]?.path }">
              {{ getLastPage()[0]?.name }}
            </el-breadcrumb-item>
            <el-breadcrumb-item>{{ curArticleTypeName }}</el-breadcrumb-item>
            <el-breadcrumb-item>{{ info.title }}</el-breadcrumb-item>
          </el-breadcrumb>
        </el-breadcrumb>
      </div>
      <div class="title">{{ info.title }}</div>
      <img
        v-show="!!info.thumbnailUrl"
        :src="info.thumbnailUrl"
        fit="contain"
      />
      <div class="time-count">
        <div class="flex">
          <el-icon><User /></el-icon>
          <span class="count">{{ `作者: ${info.author}` }}</span>
        </div>
        <div class="flex">
          <el-icon><Clock /></el-icon>
          <span class="time">{{
            `发布时间: ${
              info.releaseTime
                ? moment(info.releaseTime).format("YYYY-MM-DD HH:mm:ss")
                : ""
            }`
          }}</span>
        </div>
        <div class="flex">
          <el-icon><View /></el-icon>
          <span class="count">{{ `浏览次数: ${info.readCount}` }}</span>
        </div>
      </div>
      <div class="wang-editor-content content" v-html="info.content"></div>
      <div v-show="info.manualList && info.manualList.length > 0">
        <div style="text-align: left">{{ $t("attachment_list") }}</div>
        <div class="file-text">
          <div
            class="item"
            v-for="item in info.manualList"
            @click="downloadFile(item.fileKey)"
          >
            <span class="title">{{ item.title }}</span>
            <span
              ><el-icon><Download /></el-icon
            ></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, watch } from "vue";
import { useI18n } from "vue-i18n";
import {
  aboutDetailApi,
  awardDetailApi,
  caseDetailApi,
  downloadDetailApi,
  partnerDetailApi,
  productDetailApi,
  serviceDetailApi,
} from "@/api/index";
import { onBeforeRouteUpdate, useRoute } from "vue-router";
import { CaseType, detailType, DeviceType, ServiceType } from "@/utils/types";
import moment from "moment";
export default defineComponent({
  name: "HelloWorld",
  components: {},
  setup(props, ctx) {
    const route = useRoute();
    const { t } = useI18n();
    const state = reactive({
      type: 0,
      id: 0,
      info: {
        deviceType: "",
        type: "",
      },
      lastPagePath: "",
      lastPagePathName: "",
      curArticleTypeName: "",
    });
    onMounted(() => {
      state.type = Number(route.query.type as string) || 0;
      state.id = Number(route.query.id as string) || 0;
      getInfo(state.type, state.id);
    });
    const getInfo = (type: any, id: any) => {
      switch (type) {
        case detailType.product:
          productDetailApi(id).then((res: any) => {
            state.info = res.value;
            state.curArticleTypeName = DeviceType.filter(
              (e) => e.id === state.info.deviceType
            )[0]?.name;
          });
          break;
        case detailType.service:
          serviceDetailApi(id).then((res: any) => {
            state.info = res.value;
            state.curArticleTypeName = ServiceType.filter(
              (e) => e.id === state.info.type
            )[0]?.name;
          });
          break;
        case detailType.case:
          caseDetailApi(id).then((res: any) => {
            state.info = res.value;
            state.curArticleTypeName = CaseType.filter(
              (e) => e.id === state.info.type
            )[0]?.name;
          });
          break;
        case detailType.award:
          awardDetailApi(id).then((res: any) => {
            state.info = res.value;
          });
          break;
        case detailType.partner:
          partnerDetailApi(id).then((res: any) => {
            state.info = res.value;
          });
          break;
        case detailType.download:
          downloadDetailApi(id).then((res: any) => {
            state.info = res.value;
          });
          break;
        case detailType.about:
          aboutDetailApi(id).then((res: any) => {
            state.info = res.value;
          });
          break;

        default:
          break;
      }
    };
    const pages = [
      {
        path: "/case",
        name: "典型案例",
      },
      {
        path: "/product",
        name: "产品介绍",
      },
      {
        path: "/service",
        name: "服务内容",
      },
      {
        path: "/about",
        name: "关于我们",
      },
      {
        path: "/download",
        name: "下载中心",
      },
    ];
    const getLastPage = () => {
      const curPath = route.path;
      return pages.filter((e: any) => {
        if (curPath.includes(e.path)) {
          return e;
        }
      });
    };
    return {
      ...toRefs(state),
      moment,
      getLastPage,
    };
  },
});
</script>

<style scoped lang="scss">
.case {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.breadcrumb {
  padding: 20px;
  background: #f2f2f2;
  font-size: 20px;
}
.article-text {
  padding: 20px;
  max-width: 1400px;
  background-color: #fff;
  margin: auto;
  .title {
    font-size: 28px;
    font-weight: 700;
    padding: 20px 0;
  }
  .time-count {
    font-size: 18px;
    margin: 20px 0;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    padding-bottom: 20px;
    border-bottom: 1px solid #d5d3d3;
    .flex {
      display: flex;
      vertical-align: middle;
      align-items: center;
    }
    .time,
    .count {
      margin-left: 10px;
    }
  }
  .content {
    padding: 15px 10px;
    line-height: 35px;
  }
}
.file-text {
  text-align: left;
  font-size: 16px;
  margin: 20px 0;
  .item {
    display: inline-block;
    background-color: #f2f2f2;
    border: 1px solid #5b92eb;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
    width: auto;
    color: #5b92eb;
    .title {
      margin-right: 30px;
      font-size: 16px;
      font-weight: 400;
    }
  }
}
</style>
